<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form :disabled="true" layout="inline" :model="form" :label-col="{ style: { width: '150px' } }">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="商家ID">
              <a-input disabled class="per100" v-model="form.id" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="提现手续费（%）">
              <a-input disabled class="per100" v-model="form.withdrawalFee" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="订单分成（%）">
              <a-input disabled class="per100" v-model="form.orderSharding" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="手机号码">
              <a-input disabled class="per100" v-model="form.phone" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-model-item label="密码明文" prop="passwordPlaintext">
              <a-input disabled class="per100" v-model="form.passwordPlaintext" />
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="姓名">
              <a-input disabled v-model="form.realname" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="性別">
              <j-dict-select-tag disabled v-model="form.sex" dictCode="sex" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="昵称">
              <a-input disabled v-model="form.nickName" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="联系电话">
              <a-input disabled class="per100" v-model="form.phone" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="提现方式">
              <j-dict-select-tag disabled v-model="form.withdrawalMethod" dictCode="withdrawType" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="身份证">
              <a-input disabled v-model="form.idCard" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="微信实名">
              <a-input disabled v-model="form.wechatRealname" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="未提现金额（元）">
              <a-input disabled v-model="form.undrawnAmount" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="已提现金额（元）">
              <a-input disabled v-model="form.withdrawnAmount" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="储备资金（元）">
              <a-input disabled v-model="form.reserveAmount" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="储备金设置">
              <a-input disabled v-model="form.reserveSet" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="QQ号码">
              <a-input disabled v-model="form.qqNum" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="EMAIL">
              <a-input disabled v-model="form.email" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="代理商类型">
              <j-dict-select-tag disabled v-model="form.agentType" dictCode="agentType" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="24" :xl="16">
            <a-form-item label="代理区域">
              <a-row :gutter="5" :style="{ 'margin-bottom': 0, 'vertical-align': 'top' }">
                <a-col :span="6">
                  <a-select disabled v-model="form.provinceCode">
                    <a-select-option v-for="item in provinceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="6">
                  <a-select disabled v-model="form.cityCode">
                    <a-select-option v-for="item in cityOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="6">
                  <a-select disabled v-model="form.areaCode">
                    <a-select-option v-for="item in areaOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="6">
                  <a-select disabled v-model="form.streetCode">
                    <a-select-option v-for="item in streetOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="上级代理">
              <a-select disabled v-model="form.parentId">
                <a-select-option v-for="item in agentOptions" :key="item.id" :value="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="加盟日期">
              <a-date-picker disabled class="per100" v-model="form.joinData" valueFormat="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="最后登录时间">
              <a-input disabled class="per100" v-model="form.lastLoginTime"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="提现人工审批">
              <j-dict-select-tag v-model="form.withdrawalManualApproval" disabled dictCode="userYn" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="控制月提现">
              <a-input disabled v-model="form.controlMonthWithdrawal" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="住址">
              <a-input disabled v-model="form.address" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="详细地址">
              <a-input disabled v-model="form.detailAddress" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="邮编">
              <a-input disabled v-model="form.postalCode" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="账户状态">
              <j-dict-select-tag disabled v-model="form.status" dictCode="status" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="代理商状态">
              <j-dict-select-tag disabled v-model="form.agentStatus" dictCode="agentStatus" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-card>
</template>

<script>
import CommonApi from '@api/Common'
import { httpAction, getAction } from '@api/manage'
const Api = {
  queryId: '/sys/user/queryById',
  agentList: '/sys/user/list/1'
}

export default {
  name: 'MerchantDetail',
  inject: ['closeCurrent'],
  data() {
    return {
      form: {
        id: 0, // 商家id
        provinceCode: '', // 省
        cityCode: '', // 市
        areaCode: '', // 区
        streetCode: '', // 镇
        phone: '', // 手机号
        realname: '', // 姓名
        sex: undefined, // 性别
        nickName: undefined, // 昵称
        // 身份证
        wechatRealname: '', // 微信实名
        qqNum: '', // QQ号码
        email: '', // 电子邮件EMAIL
        createTime: '', // 创建日期
        lastLoginTime: undefined, // 最后登录时间
        address: undefined, // 详细地址
        postalCode: undefined, // 邮编
        status: undefined, // 账户状态
        delFlag: undefined // 代理商状态
      },
      loading: false,
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      streetOptions: [],
      networkOptions: [],
      agentOptions: []
    }
  },
  created() {
    this.form.businessId = this.$route.query.id || ''
    this.form.agentType = 2
    this.getDetails()
    this.getAgent()
    // 获取地址
    this.getAddress('provinceOptions')
  },
  methods: {
    async getAgent() {
      const res = await getAction(Api.agentList)
      if (res.code === 200) {
        this.agentOptions = res.result
      }
    },
    // 获取详情
    getDetails() {
      if (!Api.queryId) {
        this.$message.error('没有接口')
        return false
      }
      if (!this.form.businessId) {
        return
      }
      getAction(Api.queryId, { id: this.form.businessId })
        .then(res => {
          if (res.code === 0) {
            this.form = res.result
            if (this.form.provinceCode) {
              this.getAddress('cityOptions', { provinceCode: this.form.provinceCode })
            }
            if (this.form.cityCode) {
              this.getAddress('areaOptions', { cityCode: this.form.cityCode })
            }
            if (this.form.areaCode) {
              this.getAddress('streetOptions', { areaCode: this.form.areaCode })
            }
            if (this.form.streetCode) {
              this.getAddress('', { streetCode: this.form.streetCode })
            }
            ;['controlMonthWithdrawal', 'reserveSet', 'reserveAmount', 'withdrawnAmount', 'undrawnAmount'].forEach(
              item => (this.form[item] = (this.form[item] || 0) / 100)
            )
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 获取地址
    getAddress(name, data) {
      getAction(CommonApi.addressList, data).then(res => {
        this[name] = res.result
      })
    }
  }
}
</script>

<style scoped></style>

